<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/main/css/movie_detail.css}">
    <link rel="stylesheet" th:href="@{/main/layui/css/layui.css}">
    <script th:src="@{/main/js/jquery-2.1.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/main/layui/layui.js}"></script>
    <title>电影详情</title>
</head>
<body>
<div class="logo">
    <img src="" alt="">
</div>
<script>
    layui.use(['rate'], function () {
        var rate = layui.rate;
    })

    function getUserName() {
        return document.cookie.split(";")[0].split("=")[1];
    }

    $(function () {
        let username = getUserName();
        $.ajax({
            type: 'POST',
            url: "/user/getMovieById/" + $("#movie-id").val(), // ajax请求路径
            success:
                function (response) {
                    let data = response.data;
                    render(data);
                }
        })
        //用户是否收藏
        $.ajax({
            type: 'POST',
            url: "/MyLike/getLikeByUserNameAndMId",
            data: {
                username: getUserName(),
                mId: $("#movie-id").val()
            },
            success:
                function (res) {
                    let data = res.data;
                    if (data == "未收藏") {
                        $(".wish").html("想看");
                        $("#wish-msg").addClass("icon layui-icon layui-icon-heart");
                    } else {
                        $(".wish").html("已想看");
                        $("#wish-msg").addClass("icon layui-icon layui-icon-heart-fill");
                    }
                }
        })
    })
    $(function () {
        let username = getUserName();
        $.ajax({
            type: 'POST',
            url: "/video/getVideoByMId/" + $("#movie-id").val(), // ajax请求路径
            success:
                function (response) {
                    let data = response.data;
                    renderVideo(data);
                }
        })
    })

    //将后端返回电影预告片的数据渲染到页面上
    function renderVideo(json) {
        let html = "";
        if (json.length == 0) {
            html = html + "暂无预告片，敬请期待";
            $("#video").html(html);
            return;
        }
        for (let i = 0; i < json.length; i++) {
            let aHref = "/video/toVideo/" + json[i].id;
            html = html + '<li class="top-list">' +
                '<div>' +
                '<div class="top-info-thumb">' +
                '<a href= ' + "\"" + aHref + "\"" + '>' +
                '<img src= ' + "\"" + json[i].mSrc + "\"" + ' alt="">' +
                '<i class="ranking top-info-icon orange-bg">1</i>' +
                '<i class="play-icon"></i>' +
                '</a>' +
                '</div>' +
                '<div class="top5-video-info">' +
                '<p>' +
                '<a href= ' + "\"" + aHref + "\"" + '>' +
                json[i].desc +
                '</a>' +
                '</p>' +
                '</div>' +
                '</div>' +
                '</li>';
            $("#video").html(html);
        }
    }

    //收藏
    function collect() {
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.$;
            let wish = document.getElementsByClassName("wish")[0].innerHTML;
            if (wish == "想看") {
                //收藏
                $.ajax({
                    type: 'POST',
                    url: '/MyLike/insertByusername/' + $("#movie-id").val(),
                    data: {
                        username: getUserName()
                    },
                    success:
                        function (res) {
                            let data = res.data;
                            if (data == "收藏成功") {
                                $(".wish").html("已想看");
                                $("#wish-msg").removeClass("layui-icon-heart");
                                $("#wish-msg").addClass("layui-icon-heart-fill");
                            } else {
                                layer.msg(data, {
                                    icon: 5,
                                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                });
                            }
                        }
                })
            } else {
                //取消收藏
                $.ajax({
                    type: 'POST',
                    url: '/MyLike/deleteByusername/' + $("#movie-id").val(),
                    data: {
                        username: getUserName()
                    },
                    success:
                        function (res) {
                            let data = res.data;
                            if (data == "取消收藏成功") {
                                $(".wish").html("想看");
                                $("#wish-msg").removeClass("layui-icon-heart-fill");
                                $("#wish-msg").addClass("layui-icon-heart");
                            } else {
                                layer.msg(data, {
                                    icon: 5,
                                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                });
                            }
                        }
                })
            }
        })
    }
    function BuyTicket(){
        window.location = '/ToMoviePlan/'+$("#movie-id").val();
    }
    //将后端返回电影详情的数据渲染到页面上
    function render(json) {
        $("#cover").attr("src", json.mImage);
        $(".m_name").html(json.mName);
        $("#m_type").html(json.mType);
        $("#m_length").html("中国大陆/" + json.mLength + "分钟");
        $("#m_date").html(json.mDate + "中国大陆上映");
        $(".director").html("导演：" + json.mDirector);
        $(".actor").html("演员：" + json.mActor);
        if (json.mBoxOffice == null) {     //没有评分
            $("#score").html("暂无评分");
        } else {
            $("#score").html(json.mBoxOffice);
        }
        $(".dra").html(json.mIntroduction);
    }
</script>
<div th:replace="common :: header"></div>
<div class="banner">
    <input type="hidden" id="movie-id" th:value="${id}">
    <div class="wrapper clearfix">
        <div class="movieInfo-left">
            <div class="avatar-shadow">
                <img class="avatar" id="cover" src="" alt="">
                <div class="movie-ver"></div>
            </div>
        </div>
        <div class="movieInFo-middle clearfix">
            <div class="movie-brief-container">
                <h1 class="m_name"></h1>
                <ul>
                    <li class="ellipsis">
                        <div class="text-link" id="m_type"></div>
                    </li>
                    <li class="len ellipsis" id="m_length">

                    </li>
                    <li class="len ellipsis" id="m_date">

                    </li>
                    <li>
                        <h3 class="director" style="maring:0;
padding:0;
line-height:20px;"></h3>
                        <p style="margin-left: 55px;"></p>
                    </li>
                    <li>
                        <h3 class="actor" style="maring:0;
padding:0;
line-height:20px;"></h3>
                        <p style="margin-bottom:-30px ;margin-left: 55px;"></p>
                    </li>
                </ul>
            </div>
            <div class="action-buyBtn">
                <div class="action clearfix">
                    <a class="mylike" onclick="collect()">
                        <div>
                            <i id="wish-msg" class=""></i>
                            <span class="wish-msg wish"></span>
                        </div>
                    </a>
                    <a class="score-but" onclick="rate()">
                        <div>
                            <i class="icon layui-icon layui-icon-rate"></i>
                            <span class="wish-msg">评分</span>
                        </div>
                    </a>
                </div>
                <a class="btn buy" onclick="BuyTicket()">
                    购票
                </a>
            </div>
        </div>
        <div class="movie-stats-container">
            <div class="movie-index">
                <p class="movie-index-title">电影评分</p>
                <div class="score">
                    <span class="index-left info-num" id="score">暂无评分</span>
                    <div class="index-right">
                        <span class="score-num">
                            <span class="stonefont"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="movie-index">
                <p class="movie-index-title">累计票房</p>
                <div class="movie-index-content box">
                    <span class="stonefont">5395</span>
                    <span class="unit">万</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--剧情介绍及预告片-->
<div class="container">
    <div class="main-content-container clearfix">
        <div class="main-content">
            <div class="tab-container tab-movie-info">
                <div class="crumbs-nav-container">
                    <a th:href="@{/user/index}">开心影院</a>
                    >
                    <span class="m_name"></span>
                </div>
                <hr class="layui-border-blue">
                <div class="plot" style="margin-top: 20px;">
                    <h2>
                        剧情简介
                    </h2>
                </div>
                <div class="introduction">
                    <p class="dra">
                    </p>
                </div>
            </div>
        </div>
        <div class="related">
            <div class="tab-container tab-relate-info">
                <div class="tab-title-container related-tab-title clearfix">
                    <div class="tab-title active">预告片</div>
                </div>
            </div>
            <div class="tab-content-container">
                <div class="tab-preview tab-content active">
                    <div class="module">
                        <div class="mod-title">
                            <h2>预告片</h2>
                        </div>
                        <div class="mod-content">
                            <div class="preview-container">
                                <ul id="video">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--评论-->
        <div class="eval">
            <div class="plot" style="margin-top: 20px;">
                <h2>
                    精彩评论
                </h2>
            </div>
        </div>
    </div>
</div>
</body>
<div id="rate" style="text-align: center;">

</div>
<script>
    function rate() {
        layui.use('form', function () {
            var form = layui.form
            let html = '<div>' +
                '        <div id="test4"></div>' +
                '    </div>' +
                '<form class="layui-form" action=""><div class="layui-form-item">' +
                '    <textarea name="" id="view" required lay-verify="required" placeholder="请留下你的看法" class="layui-textarea"></textarea>' +
                '</div>' +
                '<div class="layui-form-item">' +
                '    <div class="layui-input-block" style="margin-left: 12px;"> <button onclick="eval()" type="button" lay-submit="" lay-filter="demo1" id="evaluation" class="layui-btn layui-btn-radius layui-btn-warm">提交</button>' +
                '</div>' +
                '</div>' +
                '</form>';
            $("#rate").html(html);
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: '评价',
                    area: ['500px', '300px'],
                    theme: 'skyblue',
                    type: 1,
                    content: $('#rate'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    end: function () {
                        $("#test4").remove();//弹出框关闭后将评分切除掉
                        $(".layui-textarea").remove();//弹出框关闭后将评分切除掉
                        $(".layui-btn").remove();//弹出框关闭后将评分切除掉
                    }
                });
            });
            layui.use(['rate'], function () {
                var rate = layui.rate;
                rate.render({
                    elem: '#test4'
                    , value: 0
                    , half: true
                    , theme: 'skyblue'
                    , text: true
                    , setText: function (value) { //自定义文本的回调
                        var arrs = {
                            '1': '极差'
                            , '2': '差'
                            , '3': '中等'
                            , '4': '好'
                            , '5': '极好'
                        };
                        this.span.text(arrs[value] * 2 || (value * 2 + "分"));
                    }
                })
            })
        })
    }

    function eval() {
        layui.use('layer', function () {
            var layer = layui.layer;
            let score = $("#test4").find(".layui-inline").text().charAt(0);
            if (score == "0") {
                layer.msg("未进行评分", {
                    icon: 5,
                    time: 1500,
                });
            } else {
                let eva = $("#view").val();
            }
        })
    }
</script>
</html>
